<template>
  <div class="update-name">
      <!-- 导航栏 -->
      <van-nav-bar
        title="修改昵称"
        left-text="取消"
        right-text="确定"
        @click-left="$emit('close')"
        @click-right="onConfirm"
      ></van-nav-bar>

    <!-- 修改昵称输入框 -->
    <div class="field-wrap">
      <van-field
        v-model.trim="localName"
        rows="2"
        autosize
        type="textarea"
        maxlength="7"
        placeholder="请输入昵称"
        show-word-limit
      />
    </div>

  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { UpdateUserNickNameModel } from 'models/userInfo';
import { mapState,mapMutations } from 'vuex';

export default {
  name: 'UpdateName',
  computed: {
    ...mapState(['userInfo'])
  },
  data() {
    return {
      localName:''
    }
  },
  methods: {
    ...mapMutations(['updateNickName']),
    // 确认修改
    onConfirm() {
      const updateUserNickNameModel = new UpdateUserNickNameModel();
      updateUserNickNameModel.updateUserNickName(this.localName, this.userInfo.id).then((res) => {
        if (res && res.status === 0) {
          const data = res.data;

          // 更新state
          this.updateNickName(this.localName);
          this.localName = '';
          // 提示信息
          Toast(data.msg);
          // 关闭弹出
          this.$emit('close')
        } else {
            this.localName = '';
            // 提示信息
            Toast(res.data.msg);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.field-wrap{
    padding:.1rem;
}
</style>
